<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/favicon.ico">
    <title>记事本</title>
    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="./css/offcanvas.css" rel="stylesheet">
    <script src="./js/ie-emulation-modes-warning.js"></script>
    <script type="text/javascript">
      function addDiv(divid,str){
		var str_add = "<div class='col-xs-6 col-lg-4 div-module' ><h2>biaoti</h2><p id='p"+divid+"'>"+str+"</p><p class='bttom-position'><a id='"+divid+"' class='btn btn-default'  onclick='edit("+divid+")' role='button'>编辑 &raquo;</a></p></div>";
		$("#doc").append(str_add);
		}
    </script>
  </head>

  <body>
    <nav class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Ｌの筆記</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#" data-toggle="modal" data-target="#myModal" onClick="window.localStorage.newflag=true">+ 新建</a></li>
			<li><a href="#">查找</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

    <div class="container">
      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">
	  <textarea id="modalshow2" class="modal-body" style="width:100%;height:500px;"></textarea>
	  
<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
		   aria-labelledby="myModalLabel" aria-hidden="true">
		   <div class="modal-dialog">
			  <div class="modal-content">
				 <div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
					   aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myModalLabel">
					</h4>
				 </div>
				 <textarea id="modalshow" class="modal-body" style="width:100%;" value="ss"></textarea>
				 <div class="modal-footer">
					<button type="button" class="btn btn-default btn-block" 
					   data-dismiss="modal">
					   关闭
					</button>
					<button type="button" class="btn btn-primary btn-block" onClick="add()">
					   提交更改
					</button>
				 </div>
			  </div><!-- /.modal-content -->
		   </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<div class="row" id="doc">
		</div><!--/row-->
        </div><!--/.col-xs-12.col-sm-9-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
          <div class="list-group">
            <a href="#" class="list-group-item active" data-toggle="modal" data-target="#myModal" onClick="window.localStorage.newflag=true">+ 新建</a>
            <a href="#" class="list-group-item">2016-03-02</a>
            <a href="#" class="list-group-item">2016-03-03</a>
            <a href="#" class="list-group-item">2016-03-04</a>
            <a href="#" class="list-group-item">2016-03-05</a>
            <a href="#" class="list-group-item">2016-03-06</a>
            <a href="#" class="list-group-item">2016-03-07</a>
            <a href="#" class="list-group-item">2016-03-08</a>
            <a href="#" class="list-group-item">2016-03-09</a>
            <a href="#" class="list-group-item">2016-03-10</a>
          </div>
        </div><!--/.sidebar-offcanvas-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>BEST L</p>
      </footer>

    </div><!--/.container-->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
   
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./js/ie10-viewport-bug-workaround.js"></script>

    <script src="./js/offcanvas.js"></script>

    <script>
   $(function () {window.localStorage.clear();
    if(!window.localStorage.mid){
      window.localStorage.mid=1;
    }
    $('#myModal').modal('hide');
 
    $('#myModal').on('show.bs.modal', function () {
      if(window.localStorage.newflag==true){
          $("#modalshow").val(" ");
      }
});
        $('#myModal').on('hide.bs.modal', function () {
      window.localStorage.newflag=false;
      $('#modalshow').val("");
          
});
 });

   function edit(id){
    $('#myModal').modal('show');
     window.localStorage.thisid = id;
    $('#modalshow').val( window.localStorage.getItem(id));

   }

   function add(){
    if(window.localStorage.newflag=="true"){
      var i = window.localStorage.mid;
      i++;
      window.localStorage.mid = i;
      window.localStorage.setItem(i, $('#modalshow').val());
      addDiv(i,$('#modalshow').val());
      }else{
        window.localStorage.setItem(window.localStorage.thisid, $('#modalshow').val());
        $("#p"+window.localStorage.thisid).text($('#modalshow').val());
      }
   
    $('#myModal').modal('hide');
   };
</script>

  </body>
</html>
